<script setup lang="ts">
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, computed } from "vue";
import { useUserInfoStore } from "../../stores/userInfo";

// 分页条数据模型
const pageNum = ref(1); // 当前页
const total = ref(100); // 总条数
const pageSize = ref(10); // 每页条数
const originalTableData = ref([
  ...Array(100).fill(null).map((_, index) => ({
    name: `武汉第${index}队`, // 队伍名称
    school: index % 4 === 0 ? '计算机学院' : index % 4 === 1 ? '艺术学院' : '体育学院', // 学校名称
    captain: `QIANJIAXIN${index + 1}`, // 队长名字
    lot: index % 2 === 0 ? '2024年春季' : '2025年秋季', // 母校行批次
    college: index % 4 === 0 ? '计算机学院' : index % 4 === 1 ? '艺术学院' : '体育学院', // 学院
    number: 10, // 团队人数
    way: '15888888888', // 联系方式
  })),
]);
const tableData = ref(originalTableData.value); // 当前显示的数据
const form = ref(null);
const dialogFormVisible = ref(false);
const titleName = ref('');
const userInfoStore = useUserInfoStore();
const formLabelWidth = '140px';
const imageUrl = ref('');
// 商品添加、编辑表单数据模型
const formData = ref({
  garden: '',
  campus: '',
  buildNum: '',
  roomNum: '',
  bedNum: '',
});
const formParams = ref({
  garden: '',
  college: '',
});

// 当每页条数发生了变化，会调用
const handleSizeChange = (val) => {
  pageSize.value = val;
  getHouseList();
};
// 当当前页面发生变化，会调用
const handleCurrentChange = (val) => {
  pageNum.value = val;
  getHouseList();
};

// 计算分页后的数据
const displayedData = computed(() => {
  const start = (pageNum.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});

const getHouseList = () => {
  // 这里直接使用tableData，不再调用接口
  // getHouseData(params).then((res) => {
  //   if (res.status) {
  //     tableData.value = res.data.tableData;
  //     total.value = res.data.total;
  //   }
  // });
};
getHouseList();

const resetParams = () => {
  formParams.value = {
    garden: '',
    college: '',
  };
  // 重置后恢复原始数据
  tableData.value = originalTableData.value;
  total.value = originalTableData.value.length;
  pageNum.value = 1; // 重置到第一页
};

const search = () => {
  pageNum.value = 1; // 搜索时重置到第一页
  const filteredData = originalTableData.value.filter((item) => {
    return (
        (!formParams.value.garden || item.name.includes(formParams.value.garden)) &&
        (!formParams.value.college || item.college === formParams.value.college)
    );
  });
  tableData.value = filteredData;
  total.value = filteredData.length;
};

const addGoods = () => {
  form.value.validate((valid) => {
    if (valid) {
      // insertGoods(formData.value).then((res) => {
      //   if (res.status) {
      //     getHouseList();
      //     dialogFormVisible.value = false;
      //     ElMessage.success("添加成功");
      //   }
      // });
    }
  });
};
const editGoods = () => {
  // updateGoods().then((res) => {
  //   if (res.status) {
  //     getHouseList();
  //     dialogFormVisible.value = false;
  //     ElMessage.success("修改成功");
  //   }
  // });
};
const showAddDialog = (title) => {
  // 清空表单
  titleName.value = title;
  resetFormData();
  dialogFormVisible.value = true;
};
const resetFormData = () => {
  formData.value = {
    garden: '',
    campus: '',
    buildNum: '',
    roomNum: '',
    bedNum: '',
  };
};
// 表单校验
const rules = {
  name: [
    { required: true, message: '请输入队伍名称', trigger: 'blur' },
    { min: 5, max: 16, message: '长度为5-16位', trigger: 'blur' },
  ],
  school: [
    { required: true, message: '请输入学校名称', trigger: 'blur' },
  ],
  captain: [
    { required: true, message: '请输入队长名字', trigger: 'blur' },
  ],
  time: [
    { required: true, message: '请选择时间', trigger: 'change' },
  ],
  number: [
    { required: true, message: '请输入团队人数', trigger: 'blur' },
  ],
  // picture: [
  //   {required: true, message: '请上传图片', trigger: 'change'},
  // ],
  tel: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
  ],
};
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>母校行队伍管理</span>
        <div class="extra">
          <el-button type="primary" @click="showAddDialog('添加队伍')">添加队伍</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline :model="formParams">
      <el-form-item label="队伍名称：">
        <el-input v-model="formParams.garden" placeholder="请输入队伍名称"></el-input>
      </el-form-item>
      <el-form-item label="学院：">
        <el-select v-model="formParams.college" placeholder="请选择学院">
          <el-option label="全部" value=""></el-option>
          <el-option label="计算机学院" value="计算机学院"></el-option>
          <el-option label="艺术学院" value="艺术学院"></el-option>
          <el-option label="体育学院" value="体育学院"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 商品列表 -->
    <el-table :data="displayedData" style="width: 100%">
      <el-table-column label="队伍名称" prop="name"></el-table-column>
      <el-table-column label="学校名称" prop="school"></el-table-column>
      <el-table-column label="队长名字" prop="captain"></el-table-column>
      <el-table-column label="母校行批次" prop="lot" show-overflow-tooltip></el-table-column>
      <el-table-column label="学院" prop="college"></el-table-column>
      <el-table-column label="团队人数" prop="number"></el-table-column>
      <el-table-column label="联系方式" prop="way"></el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10]"
        layout="jumper, total, sizes, prev, pager, next"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; justify-content: flex-end"
    />
  </el-card>

  <el-drawer v-model="dialogFormVisible" direction="rtl">
    <template #header>
      <h4>{{ titleName }}</h4>
    </template>
    <template #default>
      <el-form ref="form" :model="formData" label-position="top" :rules="rules">
        <el-form-item label="队伍名称：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formData.name" autocomplete="off" placeholder="请输入团队名" />
        </el-form-item>
        <el-form-item label="学校名称" :label-width="formLabelWidth" prop="price">
          <el-input v-model="formData.price" autocomplete="off" placeholder="请输入学校" />
        </el-form-item>
        <el-form-item label="申请时间：" prop="pubdate" :label-width="formLabelWidth">
          <el-date-picker
              v-model="formData.pubdate"
              type="date"
              placeholder="请选择时间"
              size="default"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="学院：" prop="flag" :label-width="formLabelWidth">
          <el-input v-model="formData.price" autocomplete="off" placeholder="请输入学院" />
        </el-form-item>
        <el-form-item label="团队人数：" :label-width="formLabelWidth" prop="intro">
          <el-input type="textarea" v-model="formData.intro" autocomplete="off" placeholder="请输入人数(不得超过100人)" />
        </el-form-item>
        <el-form-item label="联系方式：" :label-width="formLabelWidth" prop="intro">
          <el-input type="textarea" v-model="formData.intro" autocomplete="off" placeholder="请输入联系方式" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="titleName === '添加申请' ? addGoods() : editGoods()">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>